<template>
    <div id="sort">
        <v-top>
            <h3>商品分类</h3>
        </v-top>

        <!-- 搜索栏 -->
        <nav class="nav">
            <form class="nav-search">
                <i class="iconfont icon-sousuo"></i>
                <input type="search" placeholder="按内容搜索">
            </form>
        </nav>
        <!-- 中间内容 -->
        <article class="content">
            <!-- 左侧导航栏 -->
            <section class="sortNav">
                <ul>
                    <li v-for="item in leftNav" :key="item.id" :class="[index==item.catename ? 'enterBtn' : '']" @click="sortPoint(item.catename)">
                        <a :href="'#'+item.catename">{{item.catename}}</a>
                    </li>
                </ul>
            </section>
            <section class="sortRight">
                <section v-for="item in sortlist" :key="item.id" >
                    <h4 :id="item.catename">{{item.catename}}</h4>
                    <ul>
                        <li v-for="child in item.children" :key="child.id">
                            <a href="#">
                                <img :src="child.img" alt="">
                            </a>
                            <p>{{child.catename}}</p>
                        </li>
                    </ul>
                </section>
            </section>
        </article>
    </div>
</template>

<script>
//引用 全部分类 信息 的接口
import {getcates} from '../utils/api'
export default {
    data() {
        return {
            index:'家用电器',
            leftNav:[],
            sortlist:[],
        };
    },
    methods:{
        //用来做分类的锚点跳转的样式
        sortPoint(i){
            this.index = i;
        }
    },
    mounted(){
        //如果有query值 那么把query的值给index
        if(this.$route.query.catename){
            this.index = this.$route.query.catename
        }
        // console.log(this.$route.query);
        //调用全部分类 信息
        getcates().then(res=>{
            console.log(res.list);
            this.sortlist = res.list
            //把左边导航栏导入数据
            this.leftNav = res.list.map(item=>{return {catename:item.catename,id:item.id}})
        }).catch(err=>{
            console.log(err);
        })
    }
};
</script>
<style scoped src="../assets/css/classify.css">
    
</style>


